{extend name='table'}

{block name="style"}
<style>
    .layui-tab-content {
        display: flex;
    }
    .panel_left {
        width: 250px;
        flex-shrink: 0;
        margin-right: 20px;
    }
    .panel_right {
        width: 100%;
    }
    .search-input {
        border-right: none;
        border-left: none;
        border-top: none;
    }
    .search-input:focus {
        border-bottom-color: #DDD !important;
    }
    .tree {
        padding: 10px 0;
    }
    .tips {
        line-height: 24px;
        padding: 10px;
        font-size: 14px;
    }
    .operator_btn {
        display: flex;
        border-bottom: 1px solid #EEE;
        line-height: 40px;
        padding: 0 10px;
    }
    .operator_btn span {
        color: #008aff;
        margin-right: 10px;
        cursor: pointer;
    }
</style>
{/block}


{block name="content"}


<div class="layui-tab layui-tab-card">

    <div class="layui-tab-content layui-form">

        <div class="panel_left">
            <div class="layui-panel">
                <input type="text" lay-affix="clear" placeholder="{:lang('请输入关键字按回车键搜索')}" id="search_btn" class="layui-input search-input">
                <!--<div class="operator_btn">
                    <span>清空筛选</span>
                    <span>展开</span>
                    <span>折叠</span>
                    <span>回到根级</span>
                </div>-->
                <div class="tree">
                    <div id="tree_list"></div>
                </div>
            </div>
        </div>
        <div class="panel_right">
            <div class="layui-panel">
                <div class="tips"><i class="layui-icon layui-icon-tips"></i> {:lang('提示 点击左侧类目书节点可以查看子级分类')}；</div>
                <div>
                    <table id="category_list" lay-filter="category_list" data-url="{:sysuri('index')}" data-target-search="form.form-search"></table>
                </div>
            </div>
        </div>

    </div>
</div>

{/block}

{block name="script"}
<script type="text/html" id="toolbar">
    <!--{if auth("add")}-->
    <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add_btn">{:lang('添加分类')}</a>
    <!--{/if}-->
</script>
<script type="text/html" id="operator_btn">
    <!--{if auth("add")}-->
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add_sub_btn">{:lang('添加子集')}</a>
    <!--{/if}-->
    <!--{if auth("edit")}-->
    <a class="layui-btn layui-btn-xs" lay-event="edit_btn">{:lang('编辑')}</a>
    <!--{/if}-->
    <!--{if auth("delete")}-->
    <a class="layui-btn layui-btn-xs layui-btn-danger" data-confirm="确认删除吗" data-event-dbclick data-title="{:lang('删除')}" data-modal='{:url("delete")}?id={{d.id}}'>{:lang('删除')}</a>
    <!--{/if}-->
</script>

<script>

    let tree = layui.tree;
    let table = layui.table;
    let pid = 0;

    $(function() {
        // 获取页面高度
        let height = $('.layui-card-body').height();
        $('.layui-tab-content').height(height - 70);

        $('#category_list').layTable({
            even: true,
            height: 'full',
            toolbar: '#toolbar',
            where: {},
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'name', title: '{:lang("名称")}', minWidth: 100, align: 'center'},
                {field: 'code', title: '{:lang("分类编码")}', align: 'center', minWidth: 170},
                {field: 'remark', title: '{:lang("描述")}', align: 'center', minWidth: 170},
                {field: 'create_at', title: '{:lang("添加时间")}', align: 'center', minWidth: 170},
                {toolbar: '#operator_btn', title: '{:lang("操作")}', align: 'center', minWidth: 180, fixed: 'right'}
            ]]
        });

        httpRequest('{:url("getCategoryTree")}', {}, 'get', function(msg, data) {
            let list = data.list || [];
            // 渲染
            tree.render({
                elem: '#tree_list',
                data: list,
                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                click: function(obj){
                    pid = obj.data.id;
                    // 刷新表格
                    table.reload('category_list', {
                        where: {pid: pid, output: 'layui.table'}
                    });
                }
            });
        });

        // 搜索
        $('#search_btn').keyup(function(e) {
            if (e.keyCode === 13) {
                let search_key = $(this).val();
                if(!isNotEmpty(search_key)) { // 当搜索条件为空的时候刷新表格
                    pid = 0;
                    // 刷新表格
                    table.reload('category_list', {
                        where: {pid: pid, output: 'layui.table'}
                    });
                }
                httpRequest('{:url("getCategoryTree")}', {search_key: search_key}, 'get', function(msg, data) {
                    let list = data.list || [];
                    // 渲染
                    tree.render({
                        elem: '#tree_list',
                        data: list,
                        onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                        click: function(obj) {
                            pid = obj.data.id;
                            // 刷新表格
                            table.reload('category_list', {
                                where: {pid: pid, output: 'layui.table'}
                            });
                        }
                    });
                });
            }
        })

        table.on('tool(category_list)', function(obj) {
            let data = obj.data;
            if(obj.event === 'add_sub_btn') { // 添加子集
                pid = data.id;
                layer.open({
                    type: 2,
                    area: ['800px', '450px'],
                    title: '{:lang("添加子集")}',
                    content: '{:url("add")}?pid=' + pid,
                    end: function() {
                        loadData();
                    }
                });
            } else if(obj.event === 'edit_btn') {
                layer.open({
                    type: 2,
                    area: ['800px', '450px'],
                    title: '{:lang("编辑")}',
                    content: '{:url("edit")}?pid=' + pid + '&id=' + data.id,
                    end: function() {
                        loadData();
                    }
                });
            }
        })

        table.on('toolbar(category_list)', function(obj) {
            if(obj.event === 'add_btn') { // 添加分类
                layer.open({
                    type: 2,
                    area: ['800px', '450px'],
                    title: '{:lang("添加分类")}',
                    content: '{:url("add")}?pid=' + pid,
                    end: function() {
                        loadData();
                    }
                });
            }
        })
    })

    function loadData() {
        let search_key = $('#search_btn').val();
        httpRequest('{:url("getCategoryTree")}', {search_key: search_key}, 'get', function(msg, data) {
            let list = data.list || [];
            // 渲染
            tree.render({
                elem: '#tree_list',
                data: list,
                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                click: function(obj){
                    pid = obj.data.id;
                    // 刷新表格
                    table.reload('category_list', {
                        where: {pid: pid, output: 'layui.table'}
                    });
                }
            });
        });

        table.reload('category_list', {
            where: {pid: pid, output: 'layui.table'}
        });
    }
</script>
{/block}
